<template>
  <div class="protection" :style="backStyle">
    <el-row :gutter="24">
      <template v-for="(item,index) in activities" >
        <el-col :span="9" style="margin-right: 20px;margin-bottom: 10px;" :key="index"> 
        <div class="protection_charen">
          <img :src="item.img" alt="" >
          <div class="protection_cont_text" :style="textStyle">{{ item.textTop }}</div>
          <div class="h4_protection" :style="contTextStyle">{{ item.content }}</div>
          <el-button size="small" :disabled="finalDisabled" @click="addAllTags(item)">查看</el-button>
        </div>
      </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "statInput",
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view 
    },
    textColor: {
      type: String,
      default: "#000",
    },
    background: {
      type: String,
      default: "#fff",
    },
    topTextSize: {
      type: String,
      default: "12",
    },
    textSize: {
      type: String,
      default: "12",
    },
    textSize: {
      type: String,
      default: "12",
    },
    activities: {
      type: Array,
      default: () => [{
        img:require("@/icons/svg/规则.png"),
        textTop:'维权规则',
        content:'为了保障开发者用户的合法权益，规范平台的运营行为，根据相关法律法规制定本规则'

      },{
        img:require("@/icons/svg/维权.png"),
        textTop:'维权指南',
        content:'为了保护一体化运营平台(以下简称“平台”)上广大开发者的合法权益，本维权指南针对常见的权益侵害事件，提供了详细的维权方法和步骤。本指南将指导你如如何收集证据、按照流程提交相关资料，以及如何发起维权行动。'
      }]
    },
  },
  data() {
    return {
      imge:require("@/icons/svg/规则.png"),
      imgr:require("@/icons/svg/维权.png"),
    };
  },
  watch: {
    // options: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     if (val && val.length) {
    //       this.credList = val.map((item) => {
    //         return {
    //           img: item._data.img,
    //           textTop: item._data.textTop,
    //           content: item._data.content,
    //         };
    //       });
    //     }
    //   },
    // },
  },
  computed: {
    // cardStyle() {
    //   return {
    //     background: this.inputBackground,
    //     color: this.textColor,
    //     width: this.inputWidth + "px",
    //   };
    // },
    // isDesigner() {
    //   return this.$attrs._source === 'designer'
    // },
    // imageLists() {
    //   return this.isDesigner ? this.dataImages : isEmpty(this.images) ? this.dataImages : this.images
    // },
    textStyle() {
      return { fontSize: this.topTextSize + 'px', color: this.textColor + "!important"}
    },
    contTextStyle() {
      return { fontSize: this.textSize + 'px'}
    },
    backStyle() {
      return { background: this.background}
    },
  },
  mounted(){
    
  },
  methods:{
    addAllTags(e){
      this.$emit('upData',e)
    },
  },
};
</script>

<style scoped>
.protection {
  width: 100%;
  display: flex;
  padding: 10px;
}
.el-row{
  width: 100%;
}
.protection_charen{
  padding:15px 15px 0 15px;
  border: 1px solid #b9b9b9;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.h4_protection{
  text-align: center;
/* 多行文本居中 */
text-align: center;
display: flex;
justify-content: center;
line-height: 17px;
word-wrap: break-word; /* 允许单词内断行 */
  white-space: normal;
  font-size: 12px;
  height: 90px;
}
.protection_cont_text{
  margin: 5px;
  margin-top: 5px;
  font-weight: 700;
}
.protection_charen img{
  width: 50px;
  height: 50px;
}
.el-button--small, .el-button--small.is-round{
  padding: 10px 25px;
  margin-bottom: 8px;
}
</style>